Dark/Light Mode

DESCRIPTION

I put together this Toggle Theme code snippet for instructional designers who want to give their courses a modern, accessible twist. Let’s face it. Most authoring tools like Articulate Storyline and Adobe Captivate don’t have built-in theme toggling. But with this snippet, you can easily let learners switch between Light Mode and Dark Mode with just a tap. This supports the andragogy principle of self-directed learning, where adults prefer having control over their learning experience.

Why does this matter? Accessibility and comfort. Some learners prefer a bright interface, while others do better with darker tones, especially if they’re learning in low-light environments. This snippet helps reduce eye strain and makes our E-course feel more modern and user-friendly. The best part? It’s super easy to use. Just drop it in and you’re good to go. No coding skills needed, just a better experience for everyone.

SEE IT WORKING IN A COURSE

Want to see hot "Toggle Theme" works in a course? Check out this LIVE DEMO I created in an Articulate Storyline course. It gives you a quick feel for how it works and how cool it looks in a real project. Go ahead, take it for a spin!

HOW TO USE

Follow these step-by-step instructions to add the Toggle Theme code snippet to your project in Articulate Storyline. This will let learners switch between Light Mode and Dark Mode with just a tap. No coding experience required!

Open Your Project:
Launch your project in Articulate Storyline.
Go to the Player Settings:
In the top-right corner of the Storyline interface, you’ll see a button labeled “Player”. Click it to open the Player Settings window.
Add a Custom Tab to the Player:
- In the Player Settings window, click the “Features” tab.
- In the bottom-right section, you’ll see an area labeled “Player Tabs.” Click the “Add” button (a small plus icon) to create a new custom tab.
Set Up the New Tab:
- In the window that pops up, you’ll need to configure your new tab.
- In the Name field, type “Toggle Theme” or “Light/Dark Mode.”
- In the Action dropdown menu, select “Execute JavaScript.”
Open the JavaScript Editor:
- Click the “Script” button next to the Action dropdown. This will open a text editor where you can paste your JavaScript code.

Copy and Paste the Code:
- Copy the following JavaScript code and paste it into the editor:

            // Light/Dark Mode Toggle Code
            if (!document.body.classList.contains("light-mode")) {
              // Enable Light Mode
              document.body.classList.add("light-mode");
            
              document.body.style.backgroundColor = "#FFFFFF";
              document.body.style.color = "#333333";
            
              let elements = document.querySelectorAll(".slide, button, input, .player:not(.custom-popup *)");
              elements.forEach(el => {
                el.style.backgroundColor = "#F5F5F5";
                el.style.color = "#333333";
                el.style.borderColor = "#CCCCCC";
              });
            
              let buttons = document.querySelectorAll("button:not(.custom-popup button)");
              buttons.forEach(btn => {
                btn.style.backgroundColor = "#E0E0E0";
                btn.style.color = "#333333";
                btn.style.border = "1px solid #CCCCCC";
              });
            
              let toggleButton = document.querySelector("#toggleThemeButton");
              if (toggleButton) {
                toggleButton.innerText = "Switch to Dark Mode";
              }
            } else {
              // Enable Dark Mode
              document.body.classList.remove("light-mode");
            
              document.body.style.backgroundColor = "#222222";
              document.body.style.color = "#FFFFFF";
            
              let elements = document.querySelectorAll(".slide, button, input, .player:not(.custom-popup *)");
              elements.forEach(el => {
                el.style.backgroundColor = "#333333";
                el.style.color = "#FFFFFF";
                el.style.borderColor = "#555555";
              });
            
              let buttons = document.querySelectorAll("button:not(.custom-popup button)");
              buttons.forEach(btn => {
                btn.style.backgroundColor = "#444444";
                btn.style.color = "#FFFFFF";
                btn.style.border = "1px solid #555555";
              });
            
              let toggleButton = document.querySelector("#toggleThemeButton");
              if (toggleButton) {
                toggleButton.innerText = "Switch to Light Mode";
              }
            }

Save the Script:
- After pasting the code, click “OK” to close the JavaScript editor and save your script.
Save Your Player Settings:
- Click “OK” again in the Player Settings window to save all your changes.
Preview and Publish:
- Preview your project to make sure the “Toggle Theme” tab works as expected.
- When everything looks good, click “Publish” to finalize your course.

Now, when learners click the “Toggle Theme” tab, they can flip between Light Mode and Dark Mode right away. It’s a simple way to make things easier on their eyes, boost accessibility, and give your course a cool, modern feel!

CONSIDER SUPPORTING MY WORK

Love ProgressTracker? Your support helps me keep creating useful tools for the instructional design community. A little goes a long way, and I truly appreciate it! A shout-out, a coffee, or a small donation keeps the creativity flowing and helps me build more tools to make your e-learning projects shine.

If ProgressTracker has made your workflow smoother or added value to your courses, consider showing your support. It means the world to me and motivates me to keep building and sharing even more helpful resources.